import "./Index.css";

import { useState, useEffect } from "react";
import axios from "../../utils/http";
import { Carousel } from "antd";
import { useHistory, NavLink, withRouter } from "react-router-dom";

export const Index = () => {
  const contentStyle = {
    height: "332px",
    width: '100%',
    color: "#fff",
    lineHeight: "160px",
    textAlign: "center",
    background: "#364d79",
  };

  const history = useHistory();

  const [publishedBook, setpublishedBook] = useState("");
  const [publishedBooks, setpublishedBooks] = useState("");
  const [publishedbestsellers, setPublishedbestsellers] = useState("");

  const [boyChannelBook, setBoyChannelBook] = useState("");
  const [boyChannelBooks, setBoyChannelBooks] = useState("");
  const [boybestsellers, setBoybestsellers] = useState("");

  const [girlChannelBook, setGirlChannelBook] = useState("");
  const [girlChannelBooks, setGirlChannelBooks] = useState("");
  const [girlbestsellers, setGirlbestsellers] = useState("");

  const [selectCircle, setSelectCircle] = useState("");

  useEffect(() => {
    getPublishedBook();
    getBoyChannelBook();
    getGirlChannelBook();
    getSelectCircle();
  }, []);

  const getPublishedBook = () => {
    axios({
      url: "/index/getPublishedBook",
      method: "get",
    }).then((data) => {
      let newBooks = [];
      data.data.data.forEach((item, i) => {
        if (item.blockbuster === 1) {
          setpublishedBook(data.data.data[i]);
        } else {
          newBooks.push(data.data.data[i]);
        }
      });
      setpublishedBooks(newBooks);
    });
    axios({
      url: "/index/getPublishedbestsellers",
      method: "get",
    }).then((data) => {
      setPublishedbestsellers(data.data.data);
    });
  }; //获取出版图书数据
  const getBoyChannelBook = () => {
    axios({
      url: "/index/getBoyChannelBook",
      method: "get",
    }).then((data) => {
      let newBooks = [];
      console.log(data.data.data);
      data.data.data.forEach((item, i) => {
        if (item.blockbuster === 1) {
          setBoyChannelBook(data.data.data[i]);
        } else {
          newBooks.push(data.data.data[i]);
        }
      });
      setBoyChannelBooks(newBooks);
    });
    axios({
      url: "/index/getBoybestsellers",
      method: "get",
    }).then((data) => {
      setBoybestsellers(data.data.data);
    });
  }; //获取男生频道图书数据
  const getGirlChannelBook = () => {
    axios({
      url: "/index/getGirlChannelBook",
      method: "get",
    }).then((data) => {
      let newBooks = [];
      console.log(data.data.data);
      data.data.data.forEach((item, i) => {
        if (item.blockbuster === 1) {
          setGirlChannelBook(data.data.data[i]);
        } else {
          newBooks.push(data.data.data[i]);
        }
      });
      setGirlChannelBooks(newBooks);
    });
    axios({
      url: "/index/getGirlbestsellers",
      method: "get",
    }).then((data) => {
      setGirlbestsellers(data.data.data);
    });
  }; //获取女生频道图书数据
  const getSelectCircle = () => {
    axios({
      url: "/index/getSelectCircle",
      method: "get",
    }).then((data) => {
      let newArr = data.data.data;
      newArr.forEach((item) => {
        if (item.peopleNum >= 100000) {
          item.peopleNum = parseInt(item.peopleNum / 10000) + "w+";
        }
      });
      setSelectCircle(newArr);
    });
  };

  const getBooks = (List) => {
    if (List) {
      return List.map((item) => {
        return (
          <div>
            <img
              alt=""
              className="Cover"
              src={"http://localhost:8888" + item.bookImg}
              onClick={() => gotoBook()}
            ></img>
            <p className="BookName">{item.bookName}</p>
            <p className="Author">{item.author}</p>
          </div>
        );
      });
    }
  };

  const gotoBook = () => {
    history.push({
      pathname: "/TotalEntry/BookDetails",
    });
  };

  const getBestsellers = (List) => {
    if (List) {
      return List.map((item, i) => {
        return (
          <div className="List">
            <p>{i + 1}</p>
            <div>
              <span>{item.bookName}</span>
              <div className="readNum">
                <span className="iconfont icon-ai-eye "></span>
                <span>{item.readNum}</span>
              </div>
            </div>
          </div>
        );
      });
    }
  };

  const gotoCircle = () => {
    history.push({
        pathname: "/TotalEntry/CircleDetails",
      });
  }

  const showSelectCircle = (List) => {
    if (List) {
      return List.map((item) => {
        return (
          <div className="Circle">
            <img alt="" src={"http://localhost:8888" + item.imgSrc} onClick={() => gotoCircle()}></img>
            <h1>{item.circleName}</h1>
            <p>{item.circleAbstract}</p>
            <div>
              <p>
                <span className="iconfont icon-renshu"></span>
                <span>{item.peopleNum}</span>
              </p>
              <p>
                <span className="iconfont icon-icon_luntan-mian"></span>
                <span>{item.commentsNum}</span>
              </p>
            </div>
          </div>
        );
      });
    }
  };

  const gotoClass = (class1, class2) => {
    history.push({
      pathname: "/TotalEntry/Classification",
      params: { id: 1 },
    });
  };




  return (
    <div>
      <div className="banner">
        <Carousel autoplay>
          <div><img alt='' style={contentStyle} src="./images/banner1.jpg"></img></div>
          <div><img style={contentStyle} src="./images/banner1.jpg"></img></div>
          <div><img style={contentStyle} src="./images/banner1.jpg"></img></div>
        </Carousel>
        <div className='prevBanner'><span className='iconfont icon-shangxiazuoyouTriangle14'></span></div>
        <div className='nextBanner'><span className='iconfont icon-shangxiazuoyouTriangle12'></span></div>
      </div>
      <div className="published">
        <div className="title">
          <h1>出版图书</h1>
          <div className="category">
            <NavLink to="/TotalEntry/Classification/id: 1">小说</NavLink>
            <span>|</span>
            <span className="category2" onClick={() => gotoClass(0, 5)}>
              励志成功
            </span>
            <span>|</span>
            <span className="category2" onClick={() => gotoClass(0, 1)}>
              文学
            </span>
            <span>|</span>
            <span className="category2" onClick={() => gotoClass(0, 8)}>
              经济管理
            </span>
            <span>|</span>
            <span className="category2" onClick={() => gotoClass(0, 0)}>
              更多
            </span>
          </div>
        </div>
        <div className="show">
          <div className="LeftShow">
            <p className="BookName">{publishedBook.bookName}</p>
            <p className="Author">作者：{publishedBook.author}</p>
            <p className="Introduction">{publishedBook.abstract}</p>
            <img
              alt=""
              className="Cover"
              src={"http://localhost:8888" + publishedBook.bookImg}
            ></img>
          </div>
          <div className="MidShow">{getBooks(publishedBooks)}</div>
          <div className="RightShow">
            <p className="listName">畅销榜</p>
            {getBestsellers(publishedbestsellers)}
          </div>
        </div>
      </div>
      <div className="SelectCircle">
        <div className="title">
          <h1>精选圈子</h1>
        </div>
        <div className="CirShow">{showSelectCircle(selectCircle)}</div>
      </div>
      <div className="boyChannel">
        <div className="title">
          <h1>男生频道</h1>
          <div className="category">
            <span className="category2">玄幻</span>
            <span>|</span>
            <span className="category2">奇幻</span>
            <span>|</span>
            <span className="category2">武侠</span>
            <span>|</span>
            <span className="category2">仙侠</span>
            <span>|</span>
            <span className="category2">更多</span>
          </div>
        </div>
        <div className="BoyShow">
          <div className="LeftShow">
            <p className="BookName">{boyChannelBook.bookName}</p>
            <p className="Author">作者：{boyChannelBook.author}</p>
            <p className="Introduction">{boyChannelBook.abstract}</p>
            <img
              alt=""
              className="Cover"
              src={"http://localhost:8888" + boyChannelBook.bookImg}
            ></img>
          </div>
          <div className="MidShow">{getBooks(boyChannelBooks)}</div>
          <div className="RightShow">
            <p className="listName">畅销榜</p>
            {getBestsellers(boybestsellers)}
          </div>
        </div>
      </div>
      <div className="girlChannel">
        <div className="title">
          <h1>女生频道</h1>
          <div className="category">
            <span className="category2">现代言情</span>
            <span>|</span>
            <span className="category2">古代言情</span>
            <span>|</span>
            <span className="category2">幻想言情</span>
            <span>|</span>
            <span className="category2">青春校园</span>
            <span>|</span>
            <span className="category2">更多</span>
          </div>
        </div>
        <div className="GirlShow">
          <div className="LeftShow">
            <p className="BookName">{girlChannelBook.bookName}</p>
            <p className="Author">作者：{girlChannelBook.author}</p>
            <p className="Introduction">{girlChannelBook.abstract}</p>
            <img
              alt=""
              className="Cover"
              src={"http://localhost:8888" + girlChannelBook.bookImg}
            ></img>
          </div>
          <div className="MidShow">{getBooks(girlChannelBooks)}</div>
          <div className="RightShow">
            <p className="listName">畅销榜</p>
            {getBestsellers(girlbestsellers)}
          </div>
        </div>
      </div>
    </div>
  );
};
